<template>
	<view class="top-text">应在7人</view>
	
	<div>
	    <input type="text" v-model="searchText" @input="search" placeholder="输入搜索内容"  class="search"/>
	  </div>
	
	
	<view>
	    <uni-card v-for="item in cardData" :key="item.id" :data="item" class="leave-card">
	      <text>{{ item.name }}</text>
		  <text>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.number }}</text><br>
		  <text>学院{{ item.academy }}</text><br>
	      <text>专业{{ item.major }}</text><br>
		  <text>异常原因:   {{ item.reason }}</text><br>
		  <!-- <text>{{ item.number? '数据存在' : '数据不存在' }}</text> -->
		  <hr/>
	   
	    </uni-card>
	  </view>
	
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import axios from 'axios';
	
	const cardData = ref([]);
	
	onMounted(() => {
	  for(var i=0;i<=4;i++){
	   axios.get('/data/todayroom.json')
	   .then(response => {
	      cardData.value = response.data.student;
		  
	    console.info(response.data)
		})
		
		
	   .catch(error => {
	       console.error('获取数据出错：', error);
	     });
		 }
	});
	
</script>

<style>
	.top-text{
		background-color:papayawhip;
		height: 41px;
		width: 100vw;
		align-items: center;
		
	}
	.search{
		background-color: antiquewhite;
		border-radius: 20px;
		padding: 10px 20px;
		
		border: 2px solid black;
		cursor: pointer;
	}
</style>